<template>
  <button
      class="vk-button"
      ref="_ref"
      :class="{
        [`vk-button--${type}`]:type,
        [`vk-button--${size}`]:size,
        'is-plain':plain,
        'is-round':round,
        'is-circle':circle,
        'is-disabled':disabled,
      }"
      :autofocus="autofocus"
      :type="NativeType"
      :disabled="disabled">

    <span>
      <slot/>
    </span>
  </button>


</template>

<script setup lang="ts">
defineOptions({
  name: 'VKButton'
})
import type {ButtonProps} from './type.ts';
import {ref} from "vue";

withDefaults(defineProps<ButtonProps>(), {
  NativeType: 'button'
})
const _ref = ref<HTMLButtonElement>()
// 绑定 button 元素,并且把这个元素暴漏出去,这样别的组件就能获取到这个button
defineExpose({
  ref: _ref
})


</script>


<style>
.vk-button {
  background-color: var(--main-bg-color);
}
</style>